<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>公司销售数据可视化看板</title>
  <style>
    body {
      background-color: #1f2b44;
      color: #fff;
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
    }
    .container {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      gap: 10px;
      padding: 20px;
      height: 100vh;
      box-sizing: border-box;
    }
    .left, .center, .right {
      display: grid;
      gap: 10px;
    }
    .left {
      grid-template-rows: 1fr 2fr;
    }
    .center {
      grid-template-rows: 1fr 1fr 1fr;
    }
    .right {
      grid-template-rows: 1fr 1fr 1fr;
    }
    .costs-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
    }
    .card {
      background-color: #2a365c;
      padding: 20px;
      border-radius: 8px;
    }
    .title {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .chart {
      height: 200px;
    }
    .small-chart {
      height: 200px;
    }
    .top3-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      color: #fff;
      margin-top: 60px;
    }
    .top3-item {
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="left">
    <div class="card" id="sales-category">
      <div class="title">产品类别销量</div>
      <div id="category-chart" class="chart"></div>
    </div>
    <div class="costs-grid">
      <div class="card">
        <div id="costs-chart-1" class="small-chart"></div>
      </div>
      <div class="card">
        <div id="costs-chart-2" class="small-chart"></div>
      </div>
      <div class="card">
        <div id="costs-chart-3" class="small-chart"></div>
      </div>
      <div class="card">
        <div id="costs-chart-4" class="small-chart"></div>
      </div>
    </div>
  </div>
  <div class="center">
    <div class="card" id="sales-growth">
      <div class="title">销量环比</div>
      <div id="growth-chart" class="chart"></div>
    </div>
    <div class="card">
      <div class="title">商品销售额Top3</div>
      <div class="top3-list">
        <div class="top3-item">Xero 193 - 销售额：15.41 销量：26</div>
        <div class="top3-item">Phone 918 - 销售额：15.12 销量：30</div>
        <div class="top3-item">KI Conference Tables - 销售额：13.18 销量：22</div>
      </div>
    </div>
    <div class="card" id="profit-rate">
      <div class="title">利润率</div>
      <div id="profit-chart" class="small-chart"></div>
    </div>
  </div>
  <div class="right">
    <div class="card">
      <div class="title">各月销售额</div>
      <div id="right-monthly-chart" class="chart"></div>
    </div>
    <div class="card">
      <div class="title">区域销量</div>
      <div id="region-sales-chart" class="chart"></div>
    </div>
    <div class="card">
      <div class="title">快递公司销量</div>
      <div id="courier-sales-chart" class="chart"></div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
  var categoryChart = echarts.init(document.getElementById('category-chart'));
  var categoryOption = {
    tooltip: { trigger: 'item' },
    series: [{
      name: '销量',
      type: 'pie',
      radius: ['50%', '70%'],
      data: [
        {value: 54, name: '办公用品'},
        {value: 21, name: '家居产品'},
        {value: 25, name: '数码电子'}
      ],
      label: { color: '#fff' }
    }]
  };
  categoryChart.setOption(categoryOption);

  var costsData = [
    {value: 43.67, name: '推广'},
    {value: 23.10, name: '人工'},
    {value: 10.80, name: '产品'},
    {value: 22.42, name: '其他'}
  ];

  ['costs-chart-1', 'costs-chart-2', 'costs-chart-3', 'costs-chart-4'].forEach(function(id, index) {
    var costsChart = echarts.init(document.getElementById(id));
    var costsOption = {
      tooltip: { trigger: 'item' },
      series: [{
        type: 'pie',
        radius: ['60%', '80%'],
        data: [
          {value: 100 - costsData[index].value, name: '其他', itemStyle: { color: '#535A7D' }},
          {value: costsData[index].value, name: costsData[index].name, itemStyle: { color: '#7BBDD5' }}
        ],
        label: {
          color: '#fff',
          formatter: '{b} ({d}%)'
        }
      }]
    };
    costsChart.setOption(costsOption);
  });

  var growthChart = echarts.init(document.getElementById('growth-chart'));
  var growthOption = {
    xAxis: {
      type: 'category',
      data: ['4月', '5月'],
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } },
      splitLine: { show: false }
    },
    series: [{
      data: [688, 794],
      type: 'bar',
      itemStyle: { color: '#4a85e0' },
      barWidth: '50%',
      barCategoryGap: '50%'
    }]
  };
  growthChart.setOption(growthOption);

  var profitChart = echarts.init(document.getElementById('profit-chart'));
  var profitOption = {
    tooltip: { trigger: 'item' },
    series: [{
      type: 'pie',
      radius: ['60%', '80%'],
      data: [
        {value: 90.16, name: '其他', itemStyle: { color: '#535A7D' }},
        {value: 9.84, name: '利润率', itemStyle: { color: '#FC6C9D' }}
      ],
      label: {
        color: '#fff',
        formatter: '{b} ({d}%)'
      }
    }]
  };
  profitChart.setOption(profitOption);

  var rightMonthlyChart = echarts.init(document.getElementById('right-monthly-chart'));
  var rightMonthlyOption = {
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } },
      splitLine: { show: false }
    },
    series: [{
      data: [150, 120, 170, 140, 110, 160, 130, 145, 155, 165, 180, 175],
      type: 'line',
      areaStyle: { color: '#4a85e0' }
    }]
  };
  rightMonthlyChart.setOption(rightMonthlyOption);

  var regionSalesChart = echarts.init(document.getElementById('region-sales-chart'));
  var regionSalesOption = {
    xAxis: {
      type: 'category',
      data: ['华北', '华南', '东北', '西北', '西南', '华东'],
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } },
      splitLine: { show: false }
    },
    series: [{
      data: [128, 295, 109, 51, 29, 139],
      type: 'bar',
      itemStyle: { color: '#4a85e0' }
    }]
  };
  regionSalesChart.setOption(regionSalesOption);

  var courierSalesChart = echarts.init(document.getElementById('courier-sales-chart'));
  var courierSalesOption = {
    xAxis: {
      type: 'category',
      data: ['顺丰', '韵达', '中通', '申通', '圆通', 'EMS'],
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } }
    },
    yAxis: {
      type: 'value',
      axisLabel: { color: '#fff' },
      axisLine: { lineStyle: { color: '#fff' } },
      splitLine: { show: false }
    },
    series: [{
      data: [342, 62, 46, 67, 222, 12],
      type: 'bar',
      itemStyle: { color: '#4a85e0' }
    }]
  };
  courierSalesChart.setOption(courierSalesOption);
</script>
</body>
</html>